// react文件中是多种暴露方式，这不是结构赋值
import React, { Component } from 'react'
import { Row, Col } from "antd";

import dayjs from 'dayjs'

import { realTimeSituation } from '../.../../../../../network/layout'

import Fisttitle from '../../../../assets/image/safelog.png'
import WarnSrc from '../../../../assets/image/warn2.png'
import Suspend from './Suspend';
export default class FirstPlantChild extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],
            realSituation: {},
            isWarn: false
        }
    }

    queryOfrealData = () => {
        realTimeSituation().then(res => {
            console.log('cccc', res.result);
            var myDate = new Date();
            var mytime = dayjs(myDate).format('YYYY-MM-DD HH:mm:ss');
            res.result.obj.acquisitionTime = mytime;
            console.log('查询时间', mytime);
            // let nweTime= res.result.obj .acquisitionTime
            res.result.obj ? this.setState({ realSituation: res.result.obj }) : console.log('实时数据查询失败');;

        })
    }

    componentDidUpdate() {
        console.log('-ssss-', this.props);
    }

    render() {
        const { realData } = this.props;
        const state = this.state;
        let isWarn = (realData.temperature > realData.designTemperatureLimit || realData.pressure > realData.designPressure) ? true : '';
        const paramsObj = { 'type': realData.medium, 'realType': realData.temperature }
        return (
            <div>
                <div>
                    <div className={isWarn ? 'warn' : ''}>
                        <div className="thrre-plate-top">
                            <div>
                                <img src={isWarn ? WarnSrc : Fisttitle} alt="" /><span>{realData.medium}储槽A532621-001-HC001-WWD001({realData.medium})<sub>{isWarn ? '异常' : '正常'}</sub></span>
                            </div>
                        </div>
                        <div className='first-border'>
                            <Row gutter={[{ xs: 4, sm: 4, md: 4, lg: 8 }, 4]}>
                                <Col span={24}>
                                    <div>
                                        <Row gutter={[8, 8]}>
                                            <Col xs={24} sm={12} md={8}>
                                                <div ><span>罐的容积:<sub>{realData.volume}</sub></span></div>
                                            </Col>
                                            <Col xs={24} sm={12} md={8}>
                                                <div><span>设备内介质:<sub>{realData.medium}</sub></span></div>
                                            </Col>
                                            <Col xs={24} sm={12} md={8}>
                                                <div><span>介质形态:<sub>{realData.morphology}</sub></span></div>
                                            </Col>
                                        </Row>
                                    </div>
                                </Col>
                                <Col xs={24} sm={24} md={24}>
                                    <div>
                                        <Row gutter={[8, 8]}>
                                            <Col xs={24} sm={12} md={8}>
                                                <div ><span>压力类型:<sub>{realData.pressureType}</sub></span></div>
                                            </Col>
                                            <Col xs={24} sm={12} md={8}>
                                                <div>
                                                    <span>设计压力:</span>
                                                    <span>{realData.designPressure}</span>
                                                    <span>Mpa</span>
                                                </div>
                                            </Col>
                                            <Col xs={24} sm={12} md={8}>
                                                <div>
                                                    <span>最高工作压力:</span>
                                                    <span>{realData.maxPressure}</span>
                                                    <span>Mpa</span>
                                                </div>
                                            </Col>
                                        </Row>
                                    </div>
                                </Col>
                                <Col xs={24} sm={24} md={24}>
                                    <div>
                                        <Row gutter={[8, 8]}>
                                            <Col xs={24} sm={12} md={8}>
                                                <div ><span>温度类型:<sub>{realData.temperatureType}</sub></span></div>
                                            </Col>
                                            <Col xs={24} sm={12} md={8}>
                                                <div>
                                                    <span>设计温度:</span>
                                                    <span>{realData.designTemperature}</span>
                                                    <span>℃</span>
                                                </div>
                                            </Col>
                                            <Col xs={24} sm={12} md={8}>
                                                <div>
                                                    <span>设计温度高限:</span>
                                                    <span>{realData.designTemperatureLimit}</span>
                                                    <span>℃</span>
                                                </div>
                                            </Col>
                                        </Row>
                                    </div>
                                </Col>
                            </Row>
                            <Row gutter={[{ xs: 4, sm: 4, md: 4, lg: 8 }, 4]} className='infact-data'>
                                <Col xs={24} sm={12} md={8}>
                                    <div onMouseEnter={this.queryOfrealData}>
                                        <span>温度:</span>
                                        <span>{realData.temperature}</span>
                                        <span>℃</span>
                                        <Suspend newData={this.state.realSituation} />
                                    </div>
                                </Col>
                                <Col xs={24} sm={12} md={8}>
                                    <div onMouseEnter={this.queryOfrealData}>
                                        <span>压力:</span>
                                        <span>{realData.pressure}</span>
                                        <span>MPa</span>
                                        <Suspend newData={this.state.realSituation} />
                                    </div>
                                </Col>
                                <Col xs={24} sm={12} md={8}>
                                    <div onMouseEnter={this.queryOfrealData}>
                                        <span>液位:</span>
                                        <span>{realData.liquidLevel}</span>
                                        <span>mm</span>
                                        <Suspend newData={this.state.realSituation} />
                                    </div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}